网站设计与管理论文,wordpress模板 物流,网站建设需求分析流程,2021年建站赚钱关说不练假把式#xff0c;在上一#xff0c;二篇中介绍了我心目中的CRUD的样子
基于之前的理念#xff0c;我开发了一个命名为PasteTemplate的项目#xff0c;这个项目呢后续会转化成项目模板#xff0c;转化成项目模板后#xff0c;后续需要开发新的项目就可以基于这…关说不练假把式在上一二篇中介绍了我心目中的CRUD的样子
基于之前的理念我开发了一个命名为PasteTemplate的项目这个项目呢后续会转化成项目模板转化成项目模板后后续需要开发新的项目就可以基于这个模板创建这样就不要copy一个旧的项目然后删删删改改改重命名等操作了 强迫症一个项目的名字就得统一心里才舒服 那么本次作者就带来了实物本次主要介绍管理端的内容我们一起来看看 这个是后台目前使用的是HTML原生写的如果说使用VUE的话会更简单这个后续看情况推出 先用原生的原因呢一是顺手二是前期是规划期改动比较多这个项目开发过程我是录制了视频的后续会和项目模板一并放出来!
这个管理端有多少代码?
可能说代码量不太合适我就列出下各个文件的大概情况(文件采用松散编辑模式就是一个花括号就一行的写法所以不存在刻意压缩代码行的问题哈)
文件大小行数说明login/index.html8KB177登陆页面账号密码验证码登陆login.less9KB381登陆页面的样式文件pasteform/index.html12KB212表格列表页面的主UI页面pasteform/index.js22KB682表格页面的主逻辑JS页面pasteform/index.less14KB656表格页面的样式文件pasteform/view.html12KB184表单新增编辑页面的UI文件pasteform/view.js27KB820表单新增编辑页面的逻辑JS代码pasteform/view.less10KB499表单编辑新增页的样式文件index.html11KB225首页也就是菜单页面上图的这个主页面菜单采用API获取的动态方式index.less5KB311首页的样式文件lib/api.js18KB598ajax请求,一些基础函数的转化等,相当于帮助类
还有一些其他的三方组件比如jquery.js,layer.js,daterange.js,pagenum.js,datepicker.js,template.js,wangedit.js等
为啥才这么几个文件?
看上图至少有4个表为啥才这么几个文件 文件复用了 比如权限的列表页面为pasteform/index.html?pathroleInfo,而用户的列表页面为pasteform/index.html?pathuserInfo 对应的表单页面为pasteform/view.html?pathroleInfo和pasteform/view.html?pathuserInfo
实现原理
在执行UI之前获取对应的模型的模型内容比如新增的时候获取对应的AddDto模型的模型属性包括不限于包含了哪些属性(是否禁用add,edit,del等)有哪些字段字段的特性是哪些还有就是字段的默认值 同理在编辑的时候,会把要编辑的主键带入API中先查询这个UpdateDto的模型数据然后基于ID获取这个模型的值组合后返回给前端 至于表格,请求的时候要读取ListDto和对应的搜索InputQueryDto的内容
表格页面功能介绍 从上图中可以看到大概几个要点 1.左侧的菜单是采用动态模式的看图的中间部分的菜单类型可以看到和左侧的一一对应 2.右侧区域的功能都是动态的貌似除了关键字输入和搜索按钮是固定的其他都是动态控制的 3.搜索区域的内容和类型由后端的InputQueryXXX的模型来控制 4.新增编辑和删除按钮由对应模型的ListDto控制 5.列表中支持排序比如上图的ID排序层级等 6.列表中支持直接显示外表的对应字段比如父级ID那一列直接显示了父级ID对应的权限的名称 7.支持状态快编也就如上图的switch,这个是可以交互的
外表输入 支持外表输入比如要查询某一个角色有多少用户那么用户列表中角色ID作为筛选那角色ID不能自己手动输入吧 点击后会弹出角色列表页面选择要查询的然后点击确定就会把对应的值输入到输入框中(显示的是友好名) 在Model中是这样配置外表选择的
时间区间
有些时候需要查询时间区间比如本月新增的用户有多少 在Model中时间区间其实是由2个字段表示的开始字段和结束字段当然了结束字段需要配置隐藏如下图
单选
有时候查询需要选择某一个状态比如查询禁用的用户有多少查询状态正常的用户有多少(也就是一个select的选项) 在Model中体现为
表单页面功能介绍
表单页面也就是新增数据或者编辑如下
基本输入
一些比如文本文本域数字,开关等的输入和基本的一致,约定输入框的名称为Model对应字段的注释部分的前部分后部分则为placeholder,前后部分使用空格隔开
头像图片 不单单支持单图还支持多图模式
富文本模式 系统采用的是wangEdit v5的版本
时间模式
时间上支持单时间和时间区间模式
单选模式 单选有一个问题就是选项是固定的也就是要预先写好如果是动态的则使用外表的模式
外表单选 点击和表格那边的操作模式是一样的 要实现这些功能只需要在对应的Model做属性的标记即可如下 ///summary///测试表 用于测试CURD的表////summarypublic class TestTableAddDto{///summary///姓名 模拟短文本输入////summary[MaxLength(32)][Required]public string Name { get; set; }///summary///头像 模拟图片上传////summary[MaxLength(128)][ColumnDataType(image,1,head,60*60)]public string Head { get; set; }///summary///年龄 模拟输入number////summary[Range(5, 90, ErrorMessage 年龄必须限定在5~90之间!)]public int Age { get; set; }///summary///文本区域 模拟文本区域的输入////summary[MaxLength(128)]public string Desc { get; set; }///summary///富文本 模拟富文本前端HTML的是使用wangEditv5////summarypublic string Blog { get; set; }///summary///加入日期 模拟必填时间的输入////summarypublic DateTime JoinDate { get; set; }///summary///单选 一般表示状态内定的有点像Enum,关于Enum后续会支持////summary[ColumnDataType(select, [{\name\:\日类型\,\value\:0},{\name\:\月类型\,\value\:1},{\name\:\年类型\,\value\:2}])]public int DateType { get; set; }///summary///角色ID 这里一般用于外表就是选择其他表的一个数据作为输入内容////summary[ColumnDataType(outer, gradeInfo, , id, name)]public int GradeId { get; set; }///summary///成绩 模拟前端限定2位小数////summarypublic double Score { get; set; }/// summary/// 会员周期 会员生效区间/// /summary[ColumnDataType(daterange,dateStart,dateEnd)]public DateTime DateStart { get; set; }/// summary/// 会员周期 会员生效区间/// /summary[ColumnDataType(hidden)]public DateTime DateEnd { get; set; }}至于编辑模式其实编辑模式和新增模式的字段属性标记同样适用 在编辑模式中有一个特别的就是外表显示比如上面的外表选择中的选择父级则在编辑中是这样的
补充
对于上面其实比较纠结的地方应该就是字段的特性ColumnDataType
image
相对于后面的 head 来说这里是大图模式,在ListDto中表示使用图片的模式渲染
字段类型示例说明args1数字1图片数量args2字符cate存放在什么位置上传图片的时候会附带到参数type中args3字符60*60图片是否需要压缩压缩的宽高不压缩的设置为0,比如60*0args4字符arr或str默认值str对应字段的类型是array类型还是string类型如果是string类型多个之间用,隔开
head
使用方式同 image 这里表示的是小图标模式
字段类型示例说明args1数字1图片数量args2字符cate存放在什么位置上传图片的时候会附带到参数type中args3字符60*60图片是否需要压缩压缩的宽高不压缩的设置为0,比如60*0args4字符arr或str默认值str对应字段的类型是array类型还是string类型如果是string类型多个之间用,隔开
region
小程序中的地区选择可以配置精确度到区还是到县
字段类型示例说明args1字符region表示地址选择的层级可选region和sub-districtargs2字符str可用值str或者arr 表示返回的数据类型,str的时候用,隔开
outer
表示一个值需要从外表获取编辑的时候如何显示? 比如fatherId,extendRole
字段类型示例说明args1字符cateInfo外表的名称对应模板的path,或者路径路径一定附带了/字符示例./abc.htmlargs2字符extendCates表示显示的数据需要和下面2个配合是一个当前的扩展目标数组要配置hiddenargs3字符id获取返回对象的属性一般为idargs4字符nameid的友好名称显示,这里指的是外表比如cateId需要打开catelist页面选择后返回cate,则name作为友好显示,id作为实际值
outers
outer的复数版本表示可以从外部列表中选择多个比如在创建账号的时候给他绑定多个角色就用这个
字段类型示例说明args1字符cateInfo外表的名称对应模板的path,或者路径路径一定附带了/字符示例./abc.htmlargs2字符extendCates表示显示的数据需要和下面2个配合是一个数组目标数组要配置hiddenargs3字符id获取返回对象的属性一般为idargs4字符nameid的友好名称显示,这里指的是外表比如cateId需要打开catelist页面选择后返回cate,则name作为友好显示,id作为实际值
outerdisplay
ListDto中用于外表的显示比如有字段cateInfoId,对应的ExtendCateInfo要标记为outerdisplay,args2配置为extendCateInfo?.name || ‘’,否则会显示为[object object]
字段类型示例说明args1字符cateInfoId表示这个字段的值一般不显示args2字符extendCateInfo?.name || ‘’表示显示的名称友好名称需要后端支持,在前端会处理成.display
navigator
表示这个值需要使用页面从另外一个列表中获取这里表示小程序端的,建议使用outer outerdisplay
字段类型示例说明args1字符cate.name || ‘’表示显示cate.name或者空这个一般用于ListDto中args2字符cateInfo外表的名称对应模板的path可以为空args3字符/pages/cate/index/?modelselect如果对应的表不用模板则直接表示路径
datetime
默认的yyyy-MM-dd HH:mm:ss的格式
字段类型示例说明args1字符yyyy-MM-dd HH:mm:ss表示时间使用的格式
hidden
表示隐藏这个字段一般是主键ID或者外表链接过来的会这配置比如需要给cate添加子项则添加由cate那边过来 这个也适用于ListDto
字段类型示例说明args1字符bind如果不填表示隐藏如果填写了表示页面的query中modelxxx的时候不隐藏,表示非xxx的时候隐藏xxx的时候不隐藏
password
密码框模式
query
需要和 hidden 配合使用一般,表示在表单的时候使用哪个参数作为数据
字段类型示例说明args1字符cateid表示使用url中的哪个参数读取值
readyonly
表示这个字段是只读的一般是编辑的时候生效
richtext
如果是字符串没有设置maxlength默认就会变更成richtext也可以手动强制配置
textarea
如果是字符串设置maxlength且设置的值大于128默认就会变更成textarea也可以手动强制配置
select
字段类型示例说明args1字符[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]表示单选的可选值name是显示 value是值args2字符表示值得类型这里是单个跟随主类型走
selects
表示多选这个表示的是页面上的多选
字段类型示例说明args1字符[{“name”:“大”,“value”:“1”},{“name”:“小”,“value”:“2”}]表示单选的可选值name是显示 value是值args2字符str表示值得类型是一个数组还是字符串如果是字符串则使用逗号隔开
sort
表示排序表示字段的顺序,一般表格比较会使用这个
字段类型示例说明args1数字0小的排在前面默认为0
link
这个用于表格显示一般表示用于显示外表的数据,这个将弃用使用outerdisplay替换
字段类型示例说明args1字符extendCate.name显示的外表链接示例extendCate?.name || 表示显示cate.name或者空这个一般用于ListDto中
width
表示这个字段在表格得宽度可以为*或者对应得数字,是表格得列的宽度的权重,这个适用于ListDto
字段类型示例说明args1字符60表示这个列的宽度可以为数字也可以是*比如3*这样
orderby
表示基于哪个字段进行排序,这个一般是ListDto表示表格中可以基于哪个字段进行排序查询
字段类型示例说明args1字符id表示使用id正序排序args2字符id desc表示使用倒叙排序
datalist
前端表示使用datalist作为选择数据源前端需要把datalist的id赋值给datalistid默认为字段name,这个规则适用于表单和QueryDto
字段类型示例说明args1字符[{“name”:“正常”,“value”:“1”,“selected”:true}]JSON的字符串也可以为空args2字符data_pro表示调用哪个datalist数据表示datalist的id,和args1互斥args3字符read_pro_datalist()表示需要使用eval执行哪个函数一般和args2配合使用和args1互斥
daterange
主字段需要设置为daterange,其他字段需要设置hidden,在最后组合数据的时候会基于参数生成对应的,应该要设置为可null格式
字段类型示例说明args1字符sdate表示开始时间最后会传送yyyy-MM-dd 00:00:00的格式数据args2字符edate表示结束时间如果你选择2024-08-31,最后上送的会是2024-08-31 00:00:00args3字符yyyy-MM-dd 00:00:00表示时间的格式化默认使用yyyy-MM-dd 00:00:00
disable
特殊限定限定于class的表示禁用这个模型的哪些功能这个一般用于ListDto因为这些功能都在列表页面
字段类型示例说明args1字符add表示忽略新增也就是不显示新增按钮args2字符edit表示忽略编辑表示列表中没有编辑的这个选项,有些数据只能看不需要新增和编辑args3字符del表示这个表没有删除页面UI中不需要删除按钮
目前还在思考有哪些常用的需要添加进来
目前还是缺少很多东西的 1.index.js和view.js有很多重复的函数可以考虑把他们2个综合一下后续好维护 2.一些特殊的常用的功能的实现比如作者的PasteSpider中大量的使用了datalist 3.如何在小程序上接入毕竟这个项目的初衷就是为了解决小程序上大量表单输入和编辑的问题而提出的方案 4.后续大家如何使用如何按照自己的需求修改规则等
后续将放出案例项目和项目模板
我们下期见
